<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-09-11 21:21:30
 * @LastEditors: 胡涛
 * @LastEditTime: 2024-07-20 00:28:24
-->
<template>
  <div class="page-wrapper">
    <div class="toolbar">
      <div class="breadcrumb">
        <a-breadcrumb>
          <a-breadcrumb-item>数据看板</a-breadcrumb-item>
          <a-breadcrumb-item>历史数据管理</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <a-space>
        <a-button type="primary" @click="onHandleCreate" v-auth="'Create'">
          <template #icon>
            <PlusOutlined />
          </template>
          添加
        </a-button>
        <a-button type="primary" :loading="loading" @click="queryList">
          <template #icon>
            <SyncOutlined />
          </template>
          刷新
        </a-button>
        <!-- <a-button type="primary">
            <template #icon>
              <ExportOutlined />
            </template>
            导出
          </a-button> -->
      </a-space>
    </div>
    <div class="container">
      <div class="table">
        <a-table
          bordered
          sticky
          :columns="columns"
          :row-key="(record) => record.id"
          :data-source="dataSource"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
        >
        </a-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  PlusOutlined,
  ExportOutlined,
  SyncOutlined,
  EditOutlined,
  DeleteOutlined,
  SmileOutlined,
} from "@ant-design/icons-vue";
import { useListPage } from "@/helpers/pages";
import { h, onMounted, ref } from "vue";
import { PaginationConfig } from "ant-design-vue/es/pagination";
import api from "@/api";
import {
  Button,
  ButtonGroup,
  message,
  Popconfirm,
  Switch,
} from "ant-design-vue";
const {
  loading,
  dataSource,
  columns,
  pagination,
  popupModel,
  createQueryModel,
  onHandleCreate,
  onHandleUpdate,
} = useListPage<any, string>({
  columns: [
    {
      dataIndex: "enterName",
      title: "序号",
      customRender({ index }) {
        return index + 1;
      },
      align: "center",
      width: 50,
    },
    { dataIndex: "enterName", title: "企业名称" },
    { dataIndex: "stationName", title: "排口名称" },
    {
      dataIndex: "level",
      title: "空气质量分指数(IAQI)",
      align: "center",
      children: [
        {
          //NO2小时平均
          dataIndex: "iaqiSO2",
          title: "SO2小时平均",
          align: "center",
        },
        {
          //NO2小时平均
          dataIndex: "iaqiNO2",
          title: "NO2小时平均",
          align: "center",
        },
        {
          dataIndex: "iaqiPM10",
          title: "PM10(24小时)滑动平均",
          align: "center",
        },
        {
          dataIndex: "iaqiCO",
          title: "CO小时平均",
          align: "center",
        },
        {
          dataIndex: "iaqiQO3",
          title: "O3小时平均",
          align: "center",
        },
        {
          dataIndex: "iaqiO3_8",
          title: "03(8小时)滑动平均",
          align: "center",
        },
        {
          dataIndex: "iaqiPM2524",
          title: "PM2.5(24小时)滑动平均",
          align: "center",
        },
      ],
    },
    {
      dataIndex: "aqiValue",
      title: "空气质量指数",
      align: "center",
    },
    {
      dataIndex: "priPollutant",
      title: "	首要污染物	",
      align: "center",
    },
    {
      dataIndex: "remarks",
      title: "空气质量指数级别",
      customRender({ record }) {
        let value = record.aqiValue;
        if (value <= 50) {
          return "一级";
        } else if (value <= 100) {
          return "二级";
        } else if (value <= 150) {
          return "三级";
        } else if (value <= 200) {
          return "四级";
        } else if (value <= 300) {
          return "五级";
        } else {
          return "六级";
        }
      },
    },
    {
      dataIndex: "remarks",
      title: "空气质量指数级别类别",
      children: [
        {
          align: "center",
          title: " 类别",
          customRender({ record }) {
            return "良好";
          },
        },
        {
          align: "center",
          title: " 颜色",
          customRender({ record }) {
            return h(SmileOutlined, {
              style: {
                color: "#0081ff",
                fontSize: "18px",
              },
            });
          },
        },
      ],
    },
  ],
});
const onDeleteItem = async (item: any) => {
  let callback = message.loading("数据操作中，请稍后");
  setTimeout(() => {
    callback();
    queryList();
  }, 1000);
};

const queryList = async () => {
  loading.value = true;
  let res = await api.get("/data/real-data/aqi.json");
  dataSource.value = res.items;
  pagination.total = res.totalCount;
  loading.value = false;
};

const handleTableChange = (pageConfig: PaginationConfig, filters: any) => {
  pagination.current = pageConfig.current;
  queryList();
};

onMounted(() => {
  queryList();
});
</script>

<style lang="less" scoped></style>
